<template>
  <div class="app-container">
    <div class="content">
      <table>
        <th>{{ course_name }}</th>
      </table>
      <table>
        <tr v-for="trIndex in trNum" :key="trIndex">
          <td v-for="tdIndex in tdNum" :key="tdIndex">
            <table class="group" style="width: 200px">
              <tr v-if="(trIndex - 1)*tdNum + tdIndex <= maxGroup" style="background-color: rgb(74, 139, 194)">第{{ (trIndex - 1)*tdNum + tdIndex }}组</tr>
              <tr v-for="userItem in groupList[(trIndex - 1)*tdNum + tdIndex]" :key="userItem">
                {{ userItem.userName }}
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { formatJson, listQueryFilter } from '@/utils/tool'
import { courseTimetablePage, timeTableUserPage } from '@/api/course'

export default {
  data() {
    return {
      list: null,
      maxGroup: '0',
      course_name: '',
      activeName: 'second',
      tdNum: 3, // 一行显示多少个组
      trNum: 1, // 一行有多少列数据
      groupList: [], // 按照不同的组数，分配各个用户
      listQuery: {
        page: 1,
        limit: 100,
        course_timetable_id: this.$route.query.id
      },
      timeableListQuery: { // 查询初始值
        page: 1,
        limit: 10,
        id: this.$route.query.id
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取课表用户数据
    getList() {
      this.listQuery = listQueryFilter(this.listQuery)
      // 请求所有数据
      timeTableUserPage(this.listQuery).then(response => {
        this.list = response.data.list
        // 获取最大组数量
        this.getGroupNumber()
        // 把用户按照组分配到各个数组里面
        this.list.forEach(item => {
          if (this.groupList[item.group] === undefined) {
            this.groupList[item.group] = []
          }
          // 假如是组长我就往头部插入
          if (Number(item.is_group_manage) === 1) {
            this.groupList[item.group].unshift(item)
          } else {
            this.groupList[item.group].push(item)
          }
        })
        // 计算一共有多少个tr
        this.trNum = Math.ceil(this.maxGroup / this.tdNum)
      })

      courseTimetablePage(this.timeableListQuery).then(response => {
        this.course_name = response.data[0].courseInfo.name
      })
    },
    // 获取最大组的数量
    getGroupNumber() {
      this.list.forEach(item => {
        if (Number(item.group) > this.maxGroup) {
          this.maxGroup = Number(item.group)
        }
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['ID', '角色名称']
        const filterVal = ['id', 'name']
        const data = formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '用户角色表'
        })
        this.downloadLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  margin: 50px auto;
  width: 100%;
  table{
    width: 100%;
  th{
    line-height: 80px;
  }
  td{
   padding-bottom: 60px;

    width: 280px;
    text-align: center;
  vertical-align: top;
       }
    }
  }
.group{
  height: 100%;
  border-collapse: collapse;
 tr{
  border: solid 1px;
  line-height: 40px;
  text-align: center;
  width: 240px;
   }
  :nth-child(2){
      background: rgb(248, 235, 204);
               }
        }
</style>
